<style lang="scss" scoped>
$replaceColor: #242e42;

.layout-model-1 {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--rows_split_num), 1fr);
  grid-template-rows: var(--header_1_height) 1fr;
  gap: 1px;
  & > div {
    overflow: auto;
  }
  .query_1 {
    grid-column: 1 / calc(var(--query_1_span) + 1);
    background-color: $replaceColor;
  }
  .operate_1 {
    grid-column: calc(var(--query_1_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }

  .table_1 {
    grid-column: 1 / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
}

.layout-model-2 {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--rows_split_num), 1fr);
  grid-template-rows: var(--header_1_height) 1fr var(--header_2_height) 1fr;
  gap: 1px;
  & > div {
    overflow: auto;
  }
  .query_1 {
    grid-column: 1 / calc(var(--query_1_span) + 1);
    background-color: $replaceColor;
  }

  .operate_1 {
    grid-column: calc(var(--query_1_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }

  .query_2 {
    grid-column: 1 / calc(var(--query_2_span) + 1);
    background-color: $replaceColor;
  }
  .operate_2 {
    grid-column: calc(var(--query_2_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
  .table_1,
  .table_2 {
    grid-column: 1 / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
}

.layout-model-3 {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--rows_split_num), 1fr);
  grid-template-rows: var(--header_1_height) 1fr;
  gap: 1px;
  & > div {
    overflow: auto;
  }
  .query_1 {
    grid-column: 1 / calc(var(--query_1_span) + 1);
    background-color: $replaceColor;
  }
  .operate_1 {
    grid-column: calc(var(--query_1_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
  .table_1 {
    grid-column: 1 / calc(var(--table_1_span) + 1);
    background-color: $replaceColor;
  }
  .table_2 {
    grid-column: calc(var(--table_1_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
}
.layout-model-4 {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--rows_split_num), 1fr);
  grid-template-rows: var(--header_1_height) 1fr;
  gap: 1px;
  & > div {
    overflow: auto;
  }
  .query_1 {
    grid-column: 1 / calc(var(--query_1_span) + 1);
    background-color: $replaceColor;
  }
  .operate_1 {
    grid-column: calc(var(--query_1_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
  .left_list {
    grid-column: 1 / calc(var(--left_list_span) + 1);
    background-color: $replaceColor;
  }
  .table_1 {
    grid-column: calc(var(--left_list_span) + 1) / calc(var(--rows_split_num) + 1);
    background-color: $replaceColor;
  }
}
</style>

<template>
  <div :class="[`layout-model-${layoutType}`]">
    <div class="query_1">
      <slot name="query_1">
        <div v-if="$slots.query_1">query_1</div>
      </slot>
    </div>
    <div class="operate_1">
      <slot name="operate_1">
        <div v-if="$slots.operate_1">operate_1</div>
      </slot>
    </div>
    <div class="left_list" v-if="[4].includes(layoutType)">
      <slot name="left_list">
        <div v-if="$slots.left_list">left_list</div>
      </slot>
    </div>
    <div class="table_1">
      <slot name="table_1">
        <div v-if="$slots.table_1">table_1</div>
      </slot>
    </div>
    <div class="query_2" v-if="[2].includes(layoutType)">
      <slot name="query_2">
        <div v-if="$slots.query_2">query_2</div>
      </slot>
    </div>
    <div class="operate_2" v-if="[2].includes(layoutType)">
      <slot name="operate_2">
        <div v-if="$slots.operate_2">operate_2</div>
      </slot>
    </div>
    <div class="table_2" v-if="[2, 3].includes(layoutType)">
      <slot name="table_2">
        <div v-if="$slots.table_2">table_2</div>
      </slot>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "layout-model",
  computed: {
    ...mapGetters({
      layoutType: "layout/layoutType",
    }),
  },
  mounted() {
    console.log(this.$slots);
  },
};
</script>
